<template>
  <div class="skills-box">
    <heard />
    <div class="skills-body">
      <template v-if="isFinish">
        <span>Choose would you want to do</span>
        <div class="card-box">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="card-item"
            :activeClass="item.idx"
            :class="{ active: activeList.includes(item.idx) }"
            @click="selectItem(item.idx)"
          >
            <div
              :active="item.idx" :style="{
                background: `url(${getImageUrl(item.img)}) no-repeat`,
              }"
            />
            <span>{{ item.text }}</span>
          </div>
        </div>
        <div class="skills-btn" @click="finishFun">
          Finish
        </div>
      </template>
      <template v-else>
        <span>What skills do you have ?</span>
        <div class="card-box">
          <div
            v-for="(item, index) in list2"
            :key="index"
            class="card-item"
            :activeClass="item.idx"
            :class="{ active: activeList2.includes(item.idx) }"
            @click="selectItem2(item.idx)"
          >
            <div
              :active="item.idx" :style="{
                background: `url(${getImageUrl(item.img)}) no-repeat`,
              }"
            />
            <span>{{ item.text }}</span>
          </div>
        </div>
        <div class="skills-btn" @click="router.push('/carousel')">
          Finish
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
interface List {
  idx: string
  img: string
  text: string
}
const list = reactive<List[]>([
  {
    idx: '1',
    img: '1',
    text: 'Japanese language test skills',
  },
  {
    idx: '2',
    img: '2',
    text: 'Japanese communication skills',
  },
  {
    idx: '3',
    img: '3',
    text: 'English exam skills',
  },
  {
    idx: '4',
    img: '4',
    text: 'English communication skills',
  },
  {
    idx: '5',
    img: '5',
    text: 'Exam information',
  },
  {
    idx: '6',
    img: '6',
    text: 'Making friends skills',
  },
  {
    idx: '7',
    img: '7',
    text: 'Medical experience',
  },
  {
    idx: '8',
    img: '8',
    text: 'Cooking skills',
  },
])
const list2 = reactive<List[]>([
  {
    idx: '1',
    img: '1',
    text: 'Japanese language test skills',
  },
  {
    idx: '2',
    img: '2',
    text: 'Japanese communication skills',
  },
  {
    idx: '3',
    img: '3',
    text: 'English exam skills',
  },
  {
    idx: '4',
    img: '4',
    text: 'English communication skills',
  },
  {
    idx: '5',
    img: '5',
    text: 'Exam information',
  },
  {
    idx: '6',
    img: '6',
    text: 'Making friends skills',
  },
  {
    idx: '7',
    img: '7',
    text: 'Medical experience',
  },
  {
    idx: '8',
    img: '8',
    text: 'Cooking skills',
  },
])
const isFinish = ref(true)
const activeList = reactive<string[]>([])
const activeList2 = reactive<string[]>([])
function getImageUrl(img: string): string {
  return new URL(`/src/assets/pic/${img}.png`, import.meta.url).href
}
function selectItem(idx: string) {
  const index = activeList.indexOf(idx)
  if (index === -1) {
    activeList.push(idx)
  }
  else {
    activeList.splice(index, 1)
  }
}
function selectItem2(idx) {
  const index = activeList.indexOf(idx)
  if (index === -1) {
    activeList2.push(idx)
  }
  else {
    activeList2.splice(index, 1)
  }
}
function finishFun() {
  isFinish.value = false
}
</script>

<style lang="scss" scoped>
.card-item:hover{
  &>div[active='1']{
    background: url("@/assets/pic/1-1.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
  &>div[active='2']{
    background: url("@/assets/pic/2-2.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
  &>div[active='3']{
    background: url("@/assets/pic/3-3.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
  &>div[active='4']{
    background: url("@/assets/pic/4-4.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
  &>div[active='5']{
    background: url("@/assets/pic/5-5.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
  &>div[active='6']{
    background: url("@/assets/pic/6-6.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
  &>div[active='7']{
    background: url("@/assets/pic/7-7.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
  &>div[active='8']{
    background: url("@/assets/pic/8-8.png") no-repeat !important;
    background-size: 100% 100% !important;
  }

}
.active[activeClass='1']{
    &>div{
      background: url("@/assets/pic/1-1.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
  .active[activeClass='2']{
    &>div{
      background: url("@/assets/pic/2-2.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
  .active[activeClass='3']{
    &>div{
      background: url("@/assets/pic/3-3.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
  .active[activeClass='4']{
    &>div{
      background: url("@/assets/pic/4-4.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
  .active[activeClass='5']{
    &>div{
      background: url("@/assets/pic/5-5.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
  .active[activeClass='6']{
    &>div{
      background: url("@/assets/pic/6-6.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
  .active[activeClass='7']{
    &>div{
      background: url("@/assets/pic/7-7.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
  .active[activeClass='8']{
    &>div{
      background: url("@/assets/pic/8-8.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    &>span{
      color: #5598F8 !important;
    }
  }
</style>
